<template>
  <el-cascader class="w250" v-model="regionId" :options="regions" @change="handleChange"></el-cascader>
</template>

<script>
  import cities from "static/libs/city/cities_cn.json";
  import areas from "static/libs/city/areas_cn.json";
  import provinces from "static/libs/city/provinces_cn.json";
  export default {
    components: {},
    props: {
      regionIdStr:''
    },
    data() {
      return {
        regions:[],
        regionId:[],
        provices:provinces,
        cities:cities,
        areas:areas
      }
    },
    watch: {},
    computed: {},
    methods: {
      //初始化城市级联下拉列表
      initRegion(){
        let cityCache={}
        let areaCache={}
        this.areas.map((item)=>{
          if (!areaCache[item.parent_value]) {
            areaCache[item.parent_value] = [];
          }
          areaCache[item.parent_value].push(item)
        })
        for(let c of this.cities){
          let v=c.value
          c['children'] = areaCache[v]
        }
        this.cities.map((item)=>{
          if (!cityCache[item.parent_value]) {
            cityCache[item.parent_value] = [];
          }
          cityCache[item.parent_value].push(item)
        })

        for(let p of this.provices){
          let v=p.value
          p['children']=cityCache[v]
        }
        this.regions=this.provices
      },
      handleChange(value) {
        this.$emit('getRegionId',value);
      }
    },
    created() {
      this.regionIdStr.split(',')
      this.initRegion()
    },
    mounted() {

    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
